import React from 'react';
import Chart from 'echarts-for-react';
import {soilRestorationDataModel} from "../../../services/cockpit";

const bar4 = 'image://'+require('../../../assets/bar4.png');
const bar5 = 'image://'+require('../../../assets/bar5.png');

// let data = {
//     amounts:[320, 302, 301, 334, 390, 330],
//     target:[120, 132, 101, 134, 90, 230]
// }

class MyBarC extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataList: '',
        };
    }
    componentDidMount() {

        soilRestorationDataModel().then(data => {
            let dataList = data.data.ret;
            console.log(dataList)
            this.setState({
                dataList
            })
        })
    }
    setOption = () => {
        let myOption;
        let data = this.state.dataList;
        myOption = {
        textStyle:{color:'#fff'},
        color:['#2BDDC2','#3981F8'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        legend: {
            data: ['浓度', '修复目标'],
            textStyle:{
                color:'#fff'
            },
            top:10
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis:  {
            name:'mg/Kg',
            nameLocation:'start',
            axisLine:{lineStyle:{color:'#66ABFF'}},
            splitLine:{lineStyle:{color:'#334C65',type:'dashed'}},
            type: 'value',
            axisTick:{
                show:false
            },
        },
        yAxis: {
            nameGap:6,
            axisTick:{
                show:false
            },
            axisLine:{lineStyle:{color:'#66ABFF'}},
            type: 'category',
            data: data.name,
        },
        series: [
            {
                name: '浓度',
                stack: '总量',
                type: 'pictorialBar',
                symbol: bar4,
                symbolSize: ['100%', '80%'],
                data: data.amounts,
            },
            {
                name: '修复目标',
                stack: '总量',
                type: 'pictorialBar',
                symbol: bar5,
                symbolSize: ['100%', '80%'],
                data: data.target,
            }
        ]
    };
        return myOption;
    };
    render() {
        return (
            <div>
                <Chart
                    option={this.setOption()}
                    notMerge
                    lazyUpdate
                    style={{ height: 300,marginTop:'16px',width: 300}}
                />
            </div>
        )
    }
}
export default MyBarC;
